*{margin:0 ;
padding: 0;
box-sizing: border-box;
font-family: 'calibri', sans-serif;
}

*,*::after,*::before{
box-sizing: border-box;}
.menu-btn {
font-size: 18px; font-weight: bold; display: inline-block; text-align: center; background-color: #040008; color: white;
padding: 20px; font-family:'calibri'; border: none;width: 100%;}
.dropdown-menu {position: relative ;display: inline-block;}
.menu-content {display: none; position: absolute; width: 100%; background-color: #017575; min-width: 160px;z-index: 1;}



#my {/* Remove default list styling */
list-style-type: none;padding: 0;margin: 2px;overflow: hidden;
display: block;margin-left: 2%;margin-top: 10px;}

#my li{display: inline-block;height:auto;margin-left: 1%;}

*{margin:0; padding:0;box-sizing: border-box;outline: none; border:none;text-decoration: none;transition: all .2s linear;text-transform: capitalize;}
html{font-size: 62.5%;overflow-x: hidden;}
body{background: #eee;}

#my {
    list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: block;margin-left:0%;height:20vh;margin-top: 20px;width:100%;overflow: hidden;}
    #my li{margin-left:0.5%;width:100%;overflow: hidden;}
    .product img{height: 16rem;width:133rem;border-radius: 1px;}
    
    .container{max-width: 1300px;margin:0 auto;padding:3rem 2rem;height:15vh;margin-top: 5vh;}
    .container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
    gap:2rem;margin-bottom: 10px;overflow: hidden;width: 100%;}
    .container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -1.5rem;cursor: pointer;overflow: hidden;height:20vh;margin-top:0vh;width: 100%;}
    .container .products-container1 .product:hover{outline: .2rem solid #222;outline-offset: 0;}
    .container .products-container1 .product h3{padding:.5rem 0;font-size: 1.5rem;color:#444;}
    .container .products-container1 .product:hover h3{color:#27ae60;}
    .container .products-container1 .product h4 {font-size: 7.5rem;color:#444;text-align:center;margin-top:2vh;}
    

@media screen and (max-width: 900px) {
#my {
    list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: block;margin-left:0%;height:20vh;margin-top: 20px;width:100%;overflow: hidden;}
    #my li{margin-left:0.5%;width:100%;overflow: hidden;}
    .product img{height: 16rem;width:133rem;border-radius: 1px;}
    
    .container{max-width: 1300px;margin:0 auto;padding:3rem 2rem;height:15vh;margin-top: 5vh;}
    .container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
    gap:2rem;margin-bottom: 10px;overflow: hidden;width: 100%;}
    .container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -1.5rem;cursor: pointer;overflow: hidden;height:20vh;margin-top:0vh;width: 100%;}
    .container .products-container1 .product:hover{outline: .2rem solid #222;outline-offset: 0;}
    .container .products-container1 .product h3{padding:.5rem 0;font-size: 1.5rem;color:#444;}
    .container .products-container1 .product:hover h3{color:#27ae60;}
    .container .products-container1 .product h4 {font-size: 7.5rem;color:#444;text-align:center;margin-top:2vh;}

}

@media screen and (max-width: 820px) {
#my {
list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: block;margin-left:0%;height: auto;margin-top:50px;}
#my li{margin-left:1%;width: 32%;border:1px solid #040008;margin-bottom: 5px;}
.container{max-width: 1300px;margin:11px auto;padding:3rem 0rem;}
.container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
gap:1rem;margin-bottom: 10px;margin-left:2%;}
.container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -1.5rem;cursor: pointer;margin-left: 11px;}
.container .products-container1 .product h3{padding:.5rem 0;font-size:1.4rem;color:#444;}
.container .products-container1 .product:hover h3{color:#27ae60;}
.container .products-container1 .product .price{font-size: 1.3rem;color:#444;}
.container .products-container1 .product img{height: 13rem;width:14rem;border-radius: 10px;}
}


@media screen and (max-width: 800px) {
#my {
list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: block;margin-left:0%;height: auto;margin-top:50px;}
#my li{margin-left:1%;width: 32%;border:1px solid #040008;margin-bottom: 5px;}
.container{max-width: 1300px;margin:11px auto;padding:3rem 0rem;}
.container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
gap:1rem;margin-bottom: 10px;margin-left:2%;}
.container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -1.5rem;cursor: pointer;margin-left: 11px;}
.container .products-container1 .product h3{padding:.5rem 0;font-size:1.4rem;color:#444;}
.container .products-container1 .product:hover h3{color:#27ae60;}
.container .products-container1 .product .price{font-size: 1.3rem;color:#444;}
.container .products-container1 .product img{height: 13rem;width:14rem;border-radius: 10px;}
}

@media screen and (max-width:720px) {
#my {
list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: block;margin-left:0%;height: auto;margin-top: 40px;}
#my li{margin-left:1%;width: 32%;border:1px solid #040008;margin-bottom: 5px;}
.container{max-width: 1300px;margin:11px auto;padding:3rem 0rem;}
.container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap:1rem;margin-bottom: 10px;margin-left:1%;}
.container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -1.5rem;cursor: pointer;margin-left: 1px;}
.container .products-container1 .product h3{padding:.5rem 0;font-size:1.4rem;color:#444;}
.container .products-container1 .product:hover h3{color:#27ae60;}
.container .products-container1 .product .price{font-size: 1.3rem;color:#444;}
.container .products-container1 .product img{height: 13rem;width:14rem;border-radius: 10px;}

}

@media screen and (max-width: 650px) {
#my {
list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: block;margin-left:0%;height: auto;margin-top:40px;}
#my li{margin-left:1%;width:32%;border:1px solid #040008;margin-bottom: 5px;}
.container{max-width: 1300px;margin:11px auto;padding:3rem 0rem;}
.container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
gap:1rem;margin-bottom: 10px;margin-left:-5%;}
.container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -1.5rem;cursor: pointer;margin-left: 11px;}
.container .products-container1 .product h3{padding:.5rem 0;font-size:1.4rem;color:#444;}
.container .products-container1 .product:hover h3{color:#27ae60;}
.container .products-container1 .product .price{font-size: 1.3rem;color:#444;}
.container .products-container1 .product img{height: 13rem;width:14rem;border-radius: 10px;}

}

@media screen and (max-width: 600px) {
#my {
list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: 
block;margin-left:0%;height: auto;margin-top: 40px;}
#my li{margin-left:1%;width: 32%;border:1px solid #040008;margin-bottom: 5px;}
.container{max-width: 1300px;margin:11px auto;padding:3rem 0rem;}
.container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap:1rem;margin-bottom: 10px;margin-left:1%;}
.container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -1.5rem;cursor: pointer;margin-left: 1px;}
.container .products-container1 .product h3{padding:.5rem 0;font-size:1.4rem;color:#444;}
.container .products-container1 .product:hover h3{color:#27ae60;}
.container .products-container1 .product .price{font-size: 1.3rem;color:#444;}
.container .products-container1 .product img{height: 13rem;width:14rem;border-radius: 10px;}

}


@media screen and (max-width: 550px) {
#my {
list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display:block;margin-left:0%;height: auto;}
#my li{margin-left:1%;width: 48%;border:1px solid #040008;margin-bottom: 5px;}
.container{max-width: 1300px;margin:11px auto;padding:3rem 0rem;}
.container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
gap:1rem;margin-bottom: 10px;margin-left:-3%;}
.container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -1.5rem;cursor: pointer;margin-left: 11px;}
.container .products-container1 .product h3{padding:.5rem 0;font-size:1.4rem;color:#444;}
.container .products-container1 .product:hover h3{color:#27ae60;}
.container .products-container1 .product .price{font-size: 1.3rem;color:#444;}
.container .products-container1 .product img{height: 13rem;width:14rem;border-radius: 10px;}
}

@media screen and (max-width: 500px) {
#my {
list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display:block;margin-left:0%;height: auto;}
#my li{margin-left:1%;width: 48%;border:1px solid #040008;margin-bottom: 5px;}
.container{max-width: 1300px;margin:11px auto;padding:3rem 0rem;}
.container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
gap:1rem;margin-bottom: 10px;margin-left:-3%;}
.container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -1.5rem;cursor: pointer;margin-left: 11px;}
.container .products-container1 .product h3{padding:.5rem 0;font-size:1.3rem;color:#444;}
.container .products-container1 .product:hover h3{color:#27ae60;}
.container .products-container1 .product .price{font-size: 1.3rem;color:#444;}
.container .products-container1 .product img{height: 13rem;width:14rem;border-radius: 10px;}
}

@media screen and (max-width: 420px) {
#my {
list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: block;margin-left:0%;height: auto;margin-top: 20px;}
#my li{margin-left:1%;width: 48%;border:1px solid #040008;margin-bottom: 5px;height: 20rem;}
.container{max-width: 1300px;margin:11px auto;padding:3rem 0rem;}
.container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
gap:1rem;margin-bottom: 10px;margin-left:-5%;}
.container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -1.5rem;cursor: pointer;margin-left: 11px;}
.container .products-container1 .product h3{padding:.5rem 0;font-size:1.3rem;color:#444;}
.container .products-container1 .product:hover h3{color:#27ae60;}
.container .products-container1 .product .price{font-size: 1.3rem;color:#444;}
.container .products-container1 .product img{height: 13rem;width:14rem;}
}

@media screen and (max-width: 390px) {
#my {
list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: block;margin-left:0%;height: auto;margin-top: 20px;}
#my li{margin-left:1%;width:48%;border:1px solid #040008;margin-bottom: 5px;}
.container{max-width: 1300px;margin:11px auto;padding:1rem 0rem;}
.container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
gap:1rem;margin-bottom: 10px;margin-left:-1%;}
.container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset:0rem;cursor: pointer;margin-left:3px;margin-bottom: 5px;}
.container .products-container1 .product h3{padding:.2rem 0;font-size:1.3rem;color:#444;}
.container .products-container1 .product:hover h3{color:#27ae60;}
.container .products-container1 .product .price{font-size: 1.3rem;color:#444;}
.container .products-container1 .product img{height: 11rem;width:11rem;border-radius: 10px;}
}

@media screen and (max-width: 360px) {
#my {
    list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: block;margin-left:0%;height:5vh;margin-top: 20px;width:100%;overflow: hidden;}
    #my li{margin-left:0.5%;width:100%;overflow: hidden;}
    .product img{height: 16rem;width:133rem;border-radius: 1px;}
    
    .container{max-width: 1300px;margin:0 auto;padding:3rem 2rem;height:15vh;margin-top: 5vh;}
    .container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
    gap:2rem;margin-bottom: 10px;overflow: hidden;width: 100%;}
    .container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -1.5rem;cursor: pointer;overflow: hidden;height:5vh;margin-top:0vh;width: 100%;}
    .container .products-container1 .product:hover{outline: .2rem solid #222;outline-offset: 0;}
    .container .products-container1 .product h3{padding:.5rem 0;font-size: 1.5rem;color:#444;}
    .container .products-container1 .product:hover h3{color:#27ae60;}
    .container .products-container1 .product h4 {font-size: 7.5rem;color:#444;text-align:center;margin-top:2vh;}
    }

@media screen and (max-width: 330px) {
#my {
list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display:block;margin-left:0%;height: auto;}
#my li{margin-left:1%;width:48%;border:1px solid #040008;margin-bottom: 5px;}
.container{max-width: 1300px;margin:11px auto;padding:1rem 0rem;}
.container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap:1rem;margin-bottom: 10px;margin-left:-1%;}
.container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset:0rem;cursor: pointer;margin-left:2px;margin-bottom: 5px;}
.container .products-container1 .product h3{padding:.2rem 0;font-size:1.2rem;color:#444;}
.container .products-container1 .product:hover h3{color:#27ae60;}
.container .products-container1 .product .price{font-size: 1.3rem;color:#444;}
.container .products-container1 .product img{height: 11rem;width:11rem;border-radius: 10px;}
}

@media screen and (max-width: 290px) {
#my {
list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display:block;margin-left:0%;height: auto;margin-top: 10px;}
#my li{margin-left:1%;width: 48%;border:1px solid #040008;margin-bottom: 5px;}
.container{max-width: 1300px;margin:11px auto;padding:3rem 0rem;}
.container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
gap:1rem;margin-bottom: 10px;margin-left:0%;}
.container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: 0rem;cursor: pointer;margin-left: 1.5px;}
.container .products-container1 .product h3{padding:.5rem 0;font-size:1.1rem;color:#444;}
.container .products-container1 .product:hover h3{color:#27ae60;}
.container .products-container1 .product .price{font-size: 1.1rem;color:#444;}
.container .products-container1 .product img{height: 11rem;width:9rem;border-radius: 10px;}
}


@media screen and (max-width: 250px) {
#my {
list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display:block;margin-left:0%;height: auto;}
#my li{margin-left:1%;width: 48%;border:1px solid #040008;margin-bottom: 5px;}
.container{max-width: 1300px;margin:11px auto;padding:3rem 0rem;}
.container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
gap:1rem;margin-bottom: 10px;margin-left:-1%;}
.container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: 0rem;cursor: pointer;margin-left: 1px;}
.container .products-container1 .product h3{padding:.5rem 0;font-size:1.0rem;color:#444;}
.container .products-container1 .product:hover h3{color:#27ae60;}
.container .products-container1 .product .price{font-size: 1.0rem;color:#444;}
.container .products-container1 .product img{height: 11rem;width:8rem;border-radius: 10px;}
}



@media screen and (max-width: 1050px) {
    #my {
        list-style-type: none;padding: 0;margin: 0px;overflow: hidden;display: block;margin-left:0%;height:15vh;margin-top: 20px;width:100%;overflow: hidden;border:none;}
        #my li{margin-left:0.0%;width:100%;overflow: hidden;border:none;height:15vh;}
        
        #my .container{max-width: 100%;margin:0 auto;padding:3rem 2rem;height:15vh;}
        #my .container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(0rem, 0fr));
        gap:0rem;margin-bottom: 5px;overflow: hidden;width: 100%;}
     .container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -0.5rem;cursor: pointer;overflow: hidden;height:15vh;margin-top:0vh;width: 100%;}
        #my .container .products-container1 .product:hover{outline: .2rem solid #222;outline-offset: 0;}
        #my .container .products-container1 .product h3{padding:.5rem 0;font-size: 1.5rem;color:#444;}
        #my .container .products-container1 .product:hover h3{color:#27ae60;}
    .container .products-container1 .product h4 {font-size: 4.5rem;color:#444;text-align:center;margin-top:2vh;}
    
    }
    
    @media screen and (max-width: 820px) {
    #my {
        list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: block;margin-left:0%;height:10vh;margin-top: 20px;width:100%;overflow: hidden;border:none;}
        #my li{margin-left:0.5%;width:100%;overflow: hidden;border:none;height:10vh;}
        
        #my .container{max-width: 1300px;margin:0 auto;padding:3rem 2rem;height:10vh;}
        #my .container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
        gap:2rem;margin-bottom: 5px;overflow: hidden;width: 100%;}
     .container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -0.5rem;cursor: pointer;overflow: hidden;height:15vh;margin-top:0vh;width: 100%;}
        #my .container .products-container1 .product:hover{outline: .2rem solid #222;outline-offset: 0;}
        #my .container .products-container1 .product h3{padding:.5rem 0;font-size: 1.5rem;color:#444;}
        #my .container .products-container1 .product:hover h3{color:#27ae60;}
    .container .products-container1 .product h4 {font-size: 4.5rem;color:#444;text-align:center;margin-top:2vh;}
    
    }
    
    
    
    @media screen and (max-width: 720px) {
    #my {
        list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: block;margin-left:0%;height:10vh;margin-top: 20px;width:100%;overflow: hidden;border:none;}
        #my li{margin-left:0.5%;width:100%;overflow: hidden;border:none;height:10vh;}
        
        #my .container{max-width: 1300px;margin:0 auto;padding:3rem 2rem;height:10vh;}
        #my .container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
        gap:2rem;margin-bottom: 5px;overflow: hidden;width: 100%;}
     .container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -0.5rem;cursor: pointer;overflow: hidden;height:15vh;margin-top:0vh;width: 100%;}
        #my .container .products-container1 .product:hover{outline: .2rem solid #222;outline-offset: 0;}
        #my .container .products-container1 .product h3{padding:.5rem 0;font-size: 1.5rem;color:#444;}
        #my .container .products-container1 .product:hover h3{color:#27ae60;}
    .container .products-container1 .product h4 {font-size: 4.5rem;color:#444;text-align:center;margin-top:2vh;}
    
    }
    
    @media screen and (max-width: 650px) {
    #my {
        list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: block;margin-left:0%;height:20vh;margin-top: 20px;width:100%;overflow: hidden;border:none;}
        #my li{margin-left:0.5%;width:100%;overflow: hidden;border:none;height:20vh;}
        
        #my .container{max-width: 1300px;margin:0 auto;padding:3rem 2rem;height:20vh;}
        #my .container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
        gap:2rem;margin-bottom: 5px;overflow: hidden;width: 100%;}
     .container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -0.5rem;cursor: pointer;overflow: hidden;height:20vh;margin-top:0vh;width: 100%;}
        #my .container .products-container1 .product:hover{outline: .2rem solid #222;outline-offset: 0;}
        #my .container .products-container1 .product h3{padding:.5rem 0;font-size: 1.5rem;color:#444;}
        #my .container .products-container1 .product:hover h3{color:#27ae60;}
    .container .products-container1 .product h4 {font-size: 4.5rem;color:#444;text-align:center;margin-top:2vh;}
    
    }
    
    @media screen and (max-width: 600px) {
    #my {
        list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: block;margin-left:0%;height:10vh;margin-top: 20px;width:100%;overflow: hidden;border:none;}
        #my li{margin-left:0.5%;width:100%;overflow: hidden;border:none;height:10vh;}
        
        #my .container{max-width: 1300px;margin:0 auto;padding:3rem 2rem;height:10vh;}
        #my .container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
        gap:2rem;margin-bottom: 5px;overflow: hidden;width: 100%;}
     .container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -0.5rem;cursor: pointer;overflow: hidden;height:15vh;margin-top:0vh;width: 100%;}
        #my .container .products-container1 .product:hover{outline: .2rem solid #222;outline-offset: 0;}
        #my .container .products-container1 .product h3{padding:.5rem 0;font-size: 1.5rem;color:#444;}
        #my .container .products-container1 .product:hover h3{color:#27ae60;}
    .container .products-container1 .product h4 {font-size: 4.5rem;color:#444;text-align:center;margin-top:2vh;}
    
    }
    
    @media screen and (max-width: 550px) {
    #my {
        list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: block;margin-left:0%;height:15vh;margin-top: 20px;width:100%;overflow: hidden;border:none;}
        #my li{margin-left:0.5%;width:100%;overflow: hidden;border:none;height:15vh;}
        
        #my .container{max-width: 1300px;margin:0 auto;padding:3rem 2rem;height:15vh;}
        #my .container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
        gap:2rem;margin-bottom: 5px;overflow: hidden;width: 100%;}
     .container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -0.5rem;cursor: pointer;overflow: hidden;height:15vh;margin-top:0vh;width: 100%;}
        #my .container .products-container1 .product:hover{outline: .2rem solid #222;outline-offset: 0;}
        #my .container .products-container1 .product h3{padding:.5rem 0;font-size: 1.5rem;color:#444;}
        #my .container .products-container1 .product:hover h3{color:#27ae60;}
    .container .products-container1 .product h4 {font-size: 4.5rem;color:#444;text-align:center;margin-top:2vh;}
    
    }
    
    @media screen and (max-width: 420px) {
    #my {
        list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: block;margin-left:0%;height:17vh;margin-top: 20px;width:100%;overflow: hidden;border:none;}
        #my li{margin-left:0.5%;width:100%;overflow: hidden;border:none;height:17vh;}
        
        #my .container{max-width: 1300px;margin:0 auto;padding:3rem 2rem;height:17vh;}
        #my .container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
        gap:2rem;margin-bottom: 5px;overflow: hidden;width: 100%;}
     .container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -0.5rem;cursor: pointer;overflow: hidden;height:15vh;margin-top:0vh;width: 100%;}
        #my .container .products-container1 .product:hover{outline: .2rem solid #222;outline-offset: 0;}
        #my .container .products-container1 .product h3{padding:.5rem 0;font-size: 1.5rem;color:#444;}
        #my .container .products-container1 .product:hover h3{color:#27ae60;}
    .container .products-container1 .product h4 {font-size: 4.5rem;color:#444;text-align:center;margin-top:2vh;}
    
    }
    
    @media screen and (max-width: 390px) {
    #my {
        list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: block;margin-left:0%;height:17vh;margin-top: 20px;width:100%;overflow: hidden;border:none;}
        #my li{margin-left:0.5%;width:100%;overflow: hidden;border:none;height:17vh;}
        
        #my .container{max-width: 1300px;margin:0 auto;padding:3rem 2rem;height:17vh;}
        #my .container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
        gap:2rem;margin-bottom: 5px;overflow: hidden;width: 100%;}
     .container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -0.5rem;cursor: pointer;overflow: hidden;height:15vh;margin-top:0vh;width: 100%;}
        #my .container .products-container1 .product:hover{outline: .2rem solid #222;outline-offset: 0;}
        #my .container .products-container1 .product h3{padding:.5rem 0;font-size: 1.5rem;color:#444;}
        #my .container .products-container1 .product:hover h3{color:#27ae60;}
    .container .products-container1 .product h4 {font-size: 4.5rem;color:#444;text-align:center;margin-top:2vh;}
    
    }
    
    
    @media screen and (max-width: 360px) {
    #my {
        list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: block;margin-left:0%;height:15vh;margin-top: 20px;width:100%;overflow: hidden;border:none;}
        #my li{margin-left:0.5%;width:100%;overflow: hidden;border:none;height:15vh;}
        
        #my .container{max-width: 1300px;margin:0 auto;padding:3rem 2rem;height:15vh;}
        #my .container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
        gap:2rem;margin-bottom: 5px;overflow: hidden;width: 100%;}
     .container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -0.5rem;cursor: pointer;overflow: hidden;height:15vh;margin-top:0vh;width: 100%;}
        #my .container .products-container1 .product:hover{outline: .2rem solid #222;outline-offset: 0;}
        #my .container .products-container1 .product h3{padding:.5rem 0;font-size: 1.5rem;color:#444;}
        #my .container .products-container1 .product:hover h3{color:#27ae60;}
    .container .products-container1 .product h4 {font-size: 4.5rem;color:#444;text-align:center;margin-top:2vh;}
    
    }
    
    @media screen and (max-width: 320px) {
    #my {
        list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: block;margin-left:0%;height:15vh;margin-top: 20px;width:100%;overflow: hidden;border:none;}
        #my li{margin-left:0.5%;width:100%;overflow: hidden;border:none;height:15vh;}
        
        #my .container{max-width: 1300px;margin:0 auto;padding:3rem 2rem;height:15vh;}
        #my .container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
        gap:2rem;margin-bottom: 5px;overflow: hidden;width: 100%;}
     .container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -0.5rem;cursor: pointer;overflow: hidden;height:15vh;margin-top:0vh;width: 100%;}
        #my .container .products-container1 .product:hover{outline: .2rem solid #222;outline-offset: 0;}
        #my .container .products-container1 .product h3{padding:.5rem 0;font-size: 1.5rem;color:#444;}
        #my .container .products-container1 .product:hover h3{color:#27ae60;}
    .container .products-container1 .product h4 {font-size: 4.5rem;color:#444;text-align:center;margin-top:2vh;}
    
    }
    
    
    @media screen and (max-width: 280px) {
    #my {
        list-style-type: none;padding: 0;margin: 2px;overflow: hidden;display: block;margin-left:0%;height:18vh;margin-top: 20px;width:100%;overflow: hidden;border:none;}
        #my li{margin-left:0.5%;width:100%;overflow: hidden;border:none;height:18vh;}
        
        #my .container{max-width: 1300px;margin:0 auto;padding:3rem 2rem;height:18vh;}
        #my .container .products-container1{display: grid;grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
        gap:2rem;margin-bottom: 5px;overflow: hidden;width: 100%;}
     .container .products-container1 .product{text-align: center;padding:1rem 1rem;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);outline: .1rem solid #ccc;outline-offset: -0.5rem;cursor: pointer;overflow: hidden;height:18vh;margin-top:0vh;width: 100%;}
        #my .container .products-container1 .product:hover{outline: .2rem solid #222;outline-offset: 0;}
        #my .container .products-container1 .product h3{padding:.5rem 0;font-size: 1.5rem;color:#444;}
        #my .container .products-container1 .product:hover h3{color:#27ae60;}
    .container .products-container1 .product h4 {font-size: 4.5rem;color:#444;text-align:center;margin-top:2vh;}
    
    }